<template>
  <div class="mine">
    <van-nav-bar fixed @click-left="onClickLeft" @click-right="onClickRight">
      <van-icon name="user-o" slot="left" color="#fff"/>
      <van-icon name="chat-o" slot="right" color="#fff"/>
    </van-nav-bar>

    <div class="login-bg">
      <div v-if="this.$store.state.isLogin == false">
        <p>总产值 {{coinNow}}估值 ∨</p>
        <p>_ _ _</p>
      </div>
      <div v-else>
        <p @click="show=!show">总产值 {{coinNow}}估值 ↓</p>
        <p>{{biZhong}} USDT</p>
      </div>
    </div>

    <div class="login-content">
      <div v-if="this.$store.state.isLogin == false">
        <router-link :to="{name: 'login'}" tag="div" class="login-text">请登录/注册</router-link>
        <div class="income">
          <div class="income-out">
            <div>
              <p>请登录(BTC)</p>
              <p>_ _ _ _</p>
            </div>
            <div>
              <p>待收益(BTC)</p>
              <p>_ _ _ _</p>
            </div>
          </div>
          <div class="income-recharge">
            <div>
              <p>_ _ _ _</p>
              <p>可用余额({{coinNow}})</p>
            </div>
            <div>
              <span @click="goChongBi">充币</span>
              <span @click="goTiBi">提币</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <div class="login-text">
          <p>{{this.$store.state.userName}}</p>
          <p style="font-size:10px"><span>邀请码：{{yaoqCode}}</span>  </p>
        </div>
        <div class="income">
          <div class="income-in">
            <div>
              <p>累计收益({{coinNow}})</p>
              <p>{{allMoney}}</p>
            </div>
            <div>
              <p>待收收益({{coinNow}})</p>
              <p>{{moreMoney}}</p>
            </div>
          </div>
          <div class="income-recharge-in">
            <div>
              <p>{{coinNowMoney}}</p>
              <p>可用余额({{coinNow}})</p>
            </div>
            <div>
              <span @click="goChongBi">充币</span>
              <span @click="goTiBi">提币</span>
            </div>
          </div>
          <div class="income-mode">
            <div
              v-for="(item,index) in coinType"
              :key="index"
              @click="goFenBi(item.id,item.virtual_wallet_name)"
            >
              <img :src="item.img_url" alt>
              <p>{{item.virtual_wallet_name}}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="bg"></div>
      <!-- 登录前 -->
      <div class="online">在投资产</div>

      <div v-if="this.$store.state.isLogin == false">
          <div class="loginBefore">
        <div>
          <div>
            <span>
              <img src="../../assets/images/icon-current.png" alt>
            </span>
            <span>活期计划</span>
          </div>
          <span></span>
        </div>
        <div style="border-bottom:10px solid #eee">
          <div>
            <span>
              <img src="../../assets/images/icon-regular.png" alt>
            </span>
            <span>定期计划</span>
          </div>
          <span></span>
        </div>
        <div>
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-record.png" alt>
            </span>
            <span>资金记录</span>
          </div>
          <span></span>
        </div>
        <div>
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-Invitation.png" alt>
            </span>
            <span>邀友返利</span>
          </div>
          <span></span>
        </div>
        <div @click="goToOne(url[4])">
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-about us.png" alt>
            </span>
            <span style="color:#333">关于我们</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
      </div>
      </div>
      <div v-else>
        <!-- 登录后 -->
      <div class="loginBefore">
        <div @click="goToOne(url[0])" style="color:#333">
          <div>
            <span>
              <img src="../../assets/images/icon-current1.png" alt>
            </span>
            <span style="color:#333">活期计划</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
        <div @click="goToOne(url[1])" style="border-bottom:10px solid #eee">
          <div>
            <span>
              <img src="../../assets/images/icon- regular.png" alt>
            </span>
            <span style="color:#333">定期计划</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
        <div @click="goToOne(url[2])">
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-record1.png" alt>
            </span>
            <span style="color:#333">资金记录</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
        <div @click="goToOne(url[3])">
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-Invitation1.png" alt>
            </span>
            <span style="color:#333">邀友返利</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
        <div @click="goToOne(url[4])">
          <div>
            <span>
              <img style="width:85%" src="../../assets/images/icon-about us.png" alt>
            </span>
            <span style="color:#333">关于我们</span>
          </div>
          <span class="van-icon van-icon-arrow van-cell__right-icon"></span>
        </div>
      </div>
      </div>
    </div>

    <!-- 币种选择 -->
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect"/>
  </div>
</template>
<script>
import { NavBar, Icon, Cell } from "vant";
import {
  coinType,
  coinAssets,
  totalIncomeAndWaitIncome,
  login,
  biConversion
} from "../../axios/api.js";
export default {
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Cell.name]: Cell
  },
  data() {
    return {
      url:[
        '/currentPlan','/regularPlan','/capitalRecord','/inviteRebate','/aboutus'
      ],
      coinNow: "",
      coinNowId: "234314",
      coinNowMoney: "",
      coinType: [],
      userName: "",
      show: false,
      actions: [],
      allMoney: "",
      moreMoney: "",
      loginShow:'1',
      yaoqCode:localStorage.getItem('yaoqCode'),
      biZhong:''
    };
  },
  mounted() {
    console.log(this.$store.state.isLogin);
  },
  created() {

//是否自动登录
if(localStorage.getItem('setToken')){
  var that =this;
      $.ajax({
        type: "post",
        cache: false,
        traditional: true,
        dataType: "json",
        url: window.nowHref + "/user/login",
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        data: {
          token:localStorage.getItem('setToken'),
          type :2
        },
        success: function(data) {
          console.log(data);
          that.setCookies("setToken",data.data.token);
            that.setCookies("pass",that.password);
            that.setCookies("name",that.userName);
            that.setCookies("yaoqCode",data.data.invitationCode);
            // 认证
            that.setCookies("cardId",data.data.idCardIds);
            //交易密码设置判断  
            that.setCookies("tradePassword",data.data.tradePassword);
            that.$store.commit("setToken", data.data.token);
            that.$store.commit("getUser", data.data.userName);
            that.$store.commit("changeLogin", true); //登录后改变登录状态 isLogin = true
            that.getCoinType();
            that.getLostMoney();
        }
      });   
}
    this.getCoinType();
    this.getLostMoney();

  },
   watch: {
    //监听路由变化刷新数据
    $route(to, from) {
      this.getCoinType();
      this.getLostMoney();
    }
  },
  methods: {
    //跳转
    goToOne(urlTo){
      this.$router.push(urlTo)
    },
    //累计收益
    getIncome() {
      totalIncomeAndWaitIncome({ 
        params: {
          token: localStorage.getItem('setToken'),
          virtualWalletId:this.coinNowId
        }
      }).then(res => {
        console.log(res.data, 15696);
        if(res.data.data.grandTotalIncome == null){
          this.allMoney = '0'
        }else{
          this.allMoney = res.data.data.grandTotalIncome;
        }
        if(res.data.data.waitIncome == null){
          this.moreMoney = '0';
        }else{
          this.moreMoney = res.data.data.waitIncome;
        }
        
       
      });
    },
    //充币
    goChongBi() {
      this.$router.push({
        path: "/recharge",
        name: "recharge",
        params: {
          id: this.coinNowId
        }
      });
    },
    //提币
    goTiBi() {
      this.$router.push({
        path: "/getMoney",
        name: "getMoney",
        params: {
          id: this.coinNowId
        }
      });
    },
    //获取余额
    getLostMoney() {
      var getCoins = {
        token: localStorage.getItem('setToken'),
        virtualWalletId: this.coinNowId
      };
      coinAssets({
        params: getCoins
      }).then(res => {
        console.log(res.data.data, 9999);
        
        if (res.data.data == null) {
          this.coinNowMoney = 0;
        } else {
          this.coinNowMoney = res.data.data.coinAssetc;
        };
        //转换
        biConversion({
        params:{
          presentAmount:res.data.data.total,
          virtualWallteId:this.coinNowId
        }
      }).then(res => {
        console.log(res.data)
        this.biZhong = res.data.data
      })
      });
    },
    //币种转换
    // biChange(){
    //   biConversion({
    //     params:{
    //       presentAmount:'',
    //       virtualWallteId:''
    //     }
    //   }).then(res => {
    //     console.log(res.data)
    //   })
    // },
    // 币种菜单
    onSelect(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false;
      console.log(item);
      (this.coinNow = item.name),
        (this.coinNowId = item.id),
        this.getLostMoney(this.coinNowId);
        this.getIncome();
      console.log(this.coinNowId);
    },
    onClickLeft() {
      //进入用户中心
      this.$router.push("/userCenter");
    },
    onClickRight() {
      //进入消息中心
      this.$router.push("/news");
    },
    getCoinType() {
      //获取币分类列表
      var that = this;
      coinType()
        .then(res => {
          console.log(res.data);
          that.coinType = res.data.data;
          that.actions = res.data.data;

          for (var i = 0; i < res.data.data.length; i++) {
            (that.actions[i].name = res.data.data[i].virtual_wallet_name),
              (that.actions[i].dataId = i);
          }
          that.coinNow = that.actions[1].name;
          that.coinNowId = that.actions[1].id;
          that.getIncome();
        
        })
        .catch(function(err) {});
    },

    // 进入分币
    goFenBi(id, title) {
      this.$router.push({
        path: "deal",
        name: "deal",
        params: {
          id: id,
          title: title
        }
      });
    },
     //保存信息
    setCookies(loginName,loginInfo) {
      window.localStorage.setItem(loginName, loginInfo)
    },
    //获取信息
    getCookies(logininfo) {
      return window.localStorage.getItem(logininfo);
    }
  }
};
</script>
<style lang="less" scoped>
@import "../../assets/less/variable.less";
.loginBefore {
  div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #999;
    padding: 10px 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    width: 100%;
    > div {
      padding: 0;
      box-sizing: border-box;
      border-bottom: 0;
      justify-content: flex-start;
      span:first-child {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
        img {
          width: 100%;
        }
      }
    }
  }
}

.mine {
  height: 100%;
  margin-bottom: 70px;
  background: @base_background;
  overflow: hidden;
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .van-icon,
  .van-icon::before {
    color: #e5bf86;
  }
  .van-nav-bar {
    background: #000;
    .van-nav-bar__left,
    .van-nav-bar__right {
      font-size: 18px;
    }
  }
  .login-bg {
    margin-top: 45px;
    height: 160px;
    background: #000;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    text-align: left;
    padding: 0 25px;
    box-sizing: border-box;
    font-size: 14px;
    color: #e5bf86;
    > p:nth-child(2) {
      border-bottom: 1px solid #eee;
      padding: 4px 0;
    }
  }
  .login-content {
    width: 100%;
    margin-top: -180px;
    .login-text {
      width: 40%;
      font-size: 20px;
      color: #e5bf86;
      text-align: left;
      margin: 70px 25px 20px;
    }
    .income {
      width: 90%;
      margin: 0 auto;
      background: @base_background;
      border-radius: 10px;
      overflow: hidden;
      //border: 1px solid red;
      > .income-out,
      > .income-in {
        width: 100%;
        height: 68px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        background: url("../../assets/images/card-colour.png") no-repeat center
          center;
        background-size: 110%;
        border-radius: 10px;
        > div {
          width: 50%;
          color: #fff;
          font-size: @base_textSize;
        }
        > div:first-of-type {
          border-right: 1px solid #fff;
        }
      }
      > .income-recharge,
      .income-recharge-in {
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: @base_textSize;
        > div {
          width: 50%;
        }
        div:nth-child(1) {
          margin-left: 10px;
          text-align: left;
          p:nth-child(1) {
            color: @base_textColor;
            margin-bottom: 4px;
          }
          p:nth-child(2) {
            color: @base_nine;
          }
        }
        div:nth-child(2) {
          display: flex;
          justify-content: center;
          align-items: center;
          span:nth-child(1) {
            display: inline-block;
            padding: 6px 12px;
            background-color: #d4a96d;
            border-radius: 20px;
            color: #fff;
            margin-right: 20px;
          }
          span:nth-child(2) {
            display: inline-block;
            padding: 6px 12px;
            border: 1px solid #d4a96d;
            border-radius: 20px;
            color: #d4a96d;
          }
        }
      }
      > .income-recharge-in {
        height: auto;
        padding: 16px 0;
      }
      .income-mode::-webkit-scrollbar {
        background-color: transparent;
      }
      > .income-mode {
        display: -webkit-box;
        overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px;
        > div {
          width: 70px;
          > img {
            width: 60%;
          }
          p {
            font-size: @base_textSize;
            color: @base_textColor;
          }
        }
      }
    }
    .bg {
      height: 10px;
      background: #f2f3f5;
    }
    .online {
      text-align: left;
      font-size: @base_textSize;
      font-weight: bold;
      color: @base_textColor;
      border-bottom: 1px solid #ebedf0;
      background: @base_background;
      padding: 10px;
    }
    .van-cell:not(:last-child)::after {
      left: 0;
    }
    .van-cell__title {
      text-align: left;
    }
  }
}
</style>

